{include file="public/header" title="我的订单"/}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的订单</h1>
</header>
<div class="mui-content" id="order">
    <div id="slider" class="mui-slider">

        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">

            <a class="mui-control-item {eq name='status' value=''} mui-active{/eq}" href="#item_0">全部</a>
            <a class="mui-control-item {eq name='status' value='0'} mui-active{/eq}" href="#item_1">待付款</a>
            <a class="mui-control-item {eq name='status' value='1'} mui-active{/eq}" href="#item_2">待发货</a>
            <a class="mui-control-item {eq name='status' value='2'} mui-active{/eq}" href="#item_3">待收货</a>
            <a class="mui-control-item {eq name='status' value='4_5_6_7_8_9_10'} mui-active{/eq}" href="#item_4">退款/售后</a>

        </div>

        <div class="mui-slider-group">

            <div id="item_0" class="mui-slider-item mui-control-content {eq name='status' value=''} mui-active{/eq}"
                 data-status="">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {eq name='status' value=''}
                        {$data}
                        {else/}
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                        {/eq}
                    </div>
                </div>
            </div>

            <div id="item_1" class="mui-slider-item mui-control-content {eq name='status' value='0'} mui-active{/eq}"
                 data-status="0">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {eq name='status' value='0'}
                        {$data}
                        {else/}
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                        {/eq}
                    </div>
                </div>
            </div>

            <div id="item_2" class="mui-slider-item mui-control-content {eq name='status' value='1'} mui-active{/eq}"
                 data-status="1">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {eq name='status' value='1'}
                        {$data}
                        {else/}
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                        {/eq}
                    </div>
                </div>
            </div>

            <div id="item_3" class="mui-slider-item mui-control-content {eq name='status' value='2'} mui-active{/eq}"
                 data-status="2">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {eq name='status' value='2'}
                        {$data}
                        {else/}
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                        {/eq}
                    </div>
                </div>
            </div>

            <div id="item_4"
                 class="mui-slider-item mui-control-content {eq name='status' value='4_5_6_7_8_9_10'} mui-active{/eq}"
                 data-status="4_5_6_7_8_9_10">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {eq name='status' value='4_5_6_7_8_9_10'}
                        {$data}
                        {else/}
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                        {/eq}
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<script>
    (function ($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: false //是否显示滚动条
        });

        document.getElementById('slider').addEventListener('slide', function (e) {
            var $index = e.detail.slideNumber, $node = document.getElementById('item_' + $index);
            var $status = $node.getAttribute('data-status');
            console.log($status);
            $.ajax({
                url: "{:url('Order/index')}",
                type: 'post',//HTTP请求类型
                data: {status: $status},
                dataType: 'json',//服务器返回json格式数据
                timeout: 10000,//超时时间
                success: function (result) {
                    if (result.code === 200) {
                        document.getElementById('item_' + $index).querySelector('.mui-scroll').innerHTML = result.data;
                    }
                    // 加载中
                    var $loading = '<div class="mui-loading"><div class="mui-spinner"></div>请求数据中</div></div>';
                    // 上一个分类
                    var $prv = $index - 1;
                    if ($prv > -1) {
                        document.getElementById('item_' + $prv).querySelector('.mui-scroll').innerHTML = $loading;
                    }
                    // 下一个分类
                    var $next = $index + 1;
                    if (document.getElementById('item_' + $next) !== null) {
                        document.getElementById('item_' + $next).querySelector('.mui-scroll').innerHTML = $loading;
                    }
                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；
                    switch (type) {
                        case 'error':
                            $.toast('内部服务器错误(' + errorThrown + ')', {duration: 'short', type: 'div'});
                            break;
                        case 'timeout':
                            $.toast('请求超时', {duration: 'short', type: 'div'});
                            break;
                    }
                }
            });
        });

    })(mui);
</script>
{include file="public/footer"/}